import { LitElement, ReactiveElement, css, html } from "lit";

/**
 * This is my element
 * @attr {NonNullable<unknown>} size
 * @attr {red|blue} color - The color of my element
 * @prop {string} value
 * @prop {boolean} myProp - This is my property
 * @fires change
 * @fires my-event - This is my own event
 * @slot - This is a comment for the unnamed slot
 * @slot right - Right content
 * @slot left
 * @cssprop {Color} --border-color
 * @csspart header
 */
class MyElement extends HTMLElement {}

customElements.define("my-element", MyElement);

class MyE2 extends LitElement {
  value = "1";

  /**
   * @override
   * @returns {import('lit').TemplateResult<1>}
   */
  render() {
    return html`<div>
      SHA: ${this.accessKey}
      <my-element
        color="red"
        .value=${this.value}
        .size=${this.value}
        @my-event="${() => {}}"
      >
        <slot name="left"></slot>
        <slot></slot>
        <slot name="right"></slot>
      </my-element>
    </div>`;
  }
}

customElements.define("my-e2", MyE2);
